<template>
  <div class="sidebar-container">
    <el-menu
      mode="vertical"
      background-color="#3f51b5"
      text-color="#e8eaf6"
      active-text-color="#ffffff"
      :collapse="isCollapse"
      :unique-opened="true"
      class="sidebar-menu"
    >
      <el-menu-item index="home" @click="navigateTo('')">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      
      <el-submenu index="center">
        <template slot="title">
          <i class="el-icon-user-solid"></i>
          <span>个人中心</span>
        </template>
        <el-menu-item index="updatePassword" @click="navigateTo('updatePassword')">修改密码</el-menu-item>
        <el-menu-item index="center" @click="navigateTo('center')">个人信息</el-menu-item>
      </el-submenu>
      
      <template v-for="(menu, index) in filteredMenus">
        <el-submenu :key="index" :index="'menu-' + index">
          <template slot="title">
            <i :class="getIconClass(index)"></i>
            <span>{{ menu.menu }}</span>
          </template>
          
          <el-menu-item 
            v-for="(subItem, subIndex) in menu.child" 
            :key="subIndex"
            :index="'menu-' + index + '-' + subIndex"
            @click="navigateTo(subItem.tableName)"
          >
            {{ subItem.menu }}
          </el-menu-item>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
import menu from '@/utils/menu'

export default {
  data() {
    return {
      isCollapse: false,
      menus: [],
      role: '',
      icons: [
        'el-icon-s-cooperation',
        'el-icon-s-order',
        'el-icon-s-platform',
        'el-icon-s-fold',
        'el-icon-s-unfold',
        'el-icon-s-operation',
        'el-icon-s-promotion',
        'el-icon-s-release',
        'el-icon-s-ticket',
        'el-icon-s-management',
        'el-icon-s-open',
        'el-icon-s-shop',
        'el-icon-s-marketing',
        'el-icon-s-flag',
        'el-icon-s-comment'
      ]
    }
  },
  computed: {
    filteredMenus() {
      if (!this.menus || !this.menus.length) return [];
      
      const currentRoleMenu = this.menus.find(item => item.roleName === this.role);
      return currentRoleMenu ? currentRoleMenu.backMenu || [] : [];
    }
  },
  created() {
    this.menus = menu.list();
    this.role = this.$storage.get('role');
    
    // Shuffle icons for variety
    this.icons.sort(() => 0.5 - Math.random());
  },
  methods: {
    navigateTo(path) {
      if (path === '') {
        this.$router.push('/');
      } else {
        this.$router.push('/' + path);
      }
    },
    getIconClass(index) {
      return this.icons[index % this.icons.length];
    }
  }
}
</script>

<style lang="scss" scoped>
.sidebar-container {
  height: 100%;
  background-color: #3f51b5;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.sidebar-menu {
  border-right: none;
  height: 100%;
}

.el-menu-item, .el-submenu__title {
  font-size: 14px;
  height: 50px !important;
  line-height: 50px !important;
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
  
  &:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-left-color: rgba(255, 255, 255, 0.5);
  }
  
  &.is-active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-left-color: #ffffff;
  }
}

.el-submenu .el-menu-item {
  min-width: 0;
  padding-left: 48px !important;
  background-color: #303f9f !important;
  
  &:hover {
    background-color: #3949ab !important;
  }
  
  &.is-active {
    background-color: #3949ab !important;
  }
}
</style>
